<template>
  <div id="app">
    <div class="add">
      品牌名称:
      <input type="text" v-model="newBrand.brandName" />
      添加日期:
      <input type="datetime-local" v-model="newBrand.date" />
      <input type="button" value="添加" @click="add" />
    </div>
    <div class="add">
      品牌名称:<input type="text" placeholder="请输入搜索条件" />
    </div>
    <div>
      <table class="tb">
        <tbody>
          <tr>
            <th>编号</th>
            <th>品牌名称</th>
            <th>创立时间</th>
            <th>操作</th>
          </tr>
          <tr v-for="(value, index) in brandList" :key="value.id">
            <td>{{ index + 1 }}</td>
            <td>{{ value.brandName }}</td>
            <td>{{ value.date }}</td>
            <td>
              <a href="#" @click="del(value.id)">删除</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      brandList: [
        { id: 1, brandName: "BMW", date: "2022-01-01" },
        { id: 2, brandName: "TOYOTA", date: "2022-02-01" },
        { id: 3, brandName: "HONDA", date: "2022-03-01" },
        { id: 4, brandName: "BENZ", date: "2022-04-01" },
      ],
      newBrand: {
        brandName: "",
        date: "",
      },
    };
  },
  methods: {
    add() {
      this.newBrand.id =
        this.brandList.length > 0
          ? this.brandList[this.brandList.length - 1].id + 1
          : 1;
      this.brandList.push(this.newBrand);
    },
    del(id) {
      this.brandList = this.brandList.filter(function (value) {
        // console.log(value.id);
        // console.log(id);
        return value.id != id;
      });
    },
  },
};
</script>

<style>
#app {
  width: 600px;
  margin: 10px auto;
}

.tb {
  border-collapse: collapse;
  width: 100%;
}

.tb th {
  background-color: #0094ff;
  color: white;
}

.tb td,
.tb th {
  padding: 5px;
  border: 1px solid black;
  text-align: center;
}

.add {
  padding: 5px;
  border: 1px solid black;
  margin-bottom: 10px;
}
</style>